<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>时间设置</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/computingEquipment.css"/>
	</head>
	<body>
		<!--公共头部 start-->
		<div class="commonHead">
			<div class="commonHeadLeft">
				<a href="javascript:void(0);"><img src="../img/indexLogo.png" class="houseLogo"/></a>
			</div>
			<div class="commonHeadCenter">
				<ul>
					<li>
						<a class="active">项目圈</a>
					</li>
					<li>
						<a>材料数据库</a>
					</li>
					<li>
						<a>计算工具</a>
					</li>
					<li class="clear"></li>
				</ul>
			</div>
			<div class="commonHeadRight">
				<div class="infoCenter">
					<a href="javascript:void(0);">
						<span class="iconfont-tcl">&#xe643;</span>
						<span class="infoCenterText">消息中心</span>
						<span class="remindCircle"></span>
					</a>
				</div>
				<div class="loginInfo">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
						    Kdd<i class="el-icon-caret-bottom el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>账号设置</el-dropdown-item>
						    <el-dropdown-item>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<!--公共头部 end-->
		
		<!--内容 start-->
		<div class="computedContent">
			<!--项目圈内容 start-->
			<div class="timeSetting">
				<div class="projectBox wayDesign1StepStatusBox">
					<div class="stepStatus">
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum"><i class="el-icon-check"></i></div>
								<div class="stepName">建筑信息</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine hidden"></div>
								<div class="finishLine "></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum"><i class="el-icon-check"></i></div>
								<div class="stepName">控制目标</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine hidden"></div>
								<div class="finishLine "></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum"><i class="el-icon-check"></i></div>
								<div class="stepName">源头设置</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine hidden"></div>
								<div class="finishLine "></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum">4</div>
								<div class="stepName">时间设置</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine"></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">5</div>
								<div class="stepName">通风设置</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine"></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">6</div>
								<div class="stepName">计算结果</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
				
				<div class="projectBox timeSetting">
					<div class="timeSettingForm">
						<div class="materialListSelect">
							<div class="menu active">化学污染时间</div>
							<div class="menu wrongActive">颗粒物污染时间</div>
							<div class="menu wrongActive">二氧化碳污染时间</div>
							<div class="clear"></div>
						</div>
						<div class="contaminatedList">
							<div class="selectBox">
								<label>装修时间</label>
								<div class="datePickerBox">
									<template>
									 	<div class="block">
										    <el-date-picker
										      v-model="renovationDatePickerText"
										      type="daterange"
										      placeholder="请选择项目起止日期">
										    </el-date-picker>
									  	</div>
									</template>
								</div>
								<div class="clear"></div>
							</div>
							<div class="selectBox">
								<label>验收时间</label>
								<div class="datePickerBox">
									<template>
									 	<div class="block">
										    <el-date-picker
										      v-model="acceptanceDatePickerText"
										      type="daterange"
										      placeholder="请选择项目起止日期">
										    </el-date-picker>
									  	</div>
									</template>
								</div>
								<div class="clear"></div>
							</div>
							<div class="selectBox">
								<label>模拟结束</label>
								<div class="datePickerBox fl">
									<template>
									 	<div class="block">
										    <el-date-picker
										      v-model="modelDatePickerText"
										      type="daterange"
										      placeholder="请选择项目起止日期">
										    </el-date-picker>
									  	</div>
									</template>
								</div>
								<span style="float: left;line-height: 36px;font-size: 12px;margin-left: 10px;">模拟结束时间</span>
								<div class="clear"></div>
							</div>
							<div class="selectBox">
								<label>材料时间</label>
								<div class="datePickerBox">
									<template>
										<el-radio class="radio" v-model="radio" label="1" style="width: 50px;">默认</el-radio>
										<el-radio class="radio" v-model="radio" label="2" style="width: 50px;">自定义</el-radio>
									</template>
								</div>
								<div class="clear"></div>
							</div>
							
							<div class="materialList ">
								<ul>
									<li class="listDec">
										<div>材料序号</div>
										<div>类型</div>
										<div>时间</div>
										<div class="clear"></div>
									</li>
									<li class="memberDec">
										<div class="constant">01</div>
										<div class="constant">强化木地板</div>
										<template>	
											<div class="block fl listDatePicker">
											    <el-date-picker
											      v-model="modelDatePickerText1"
											      type="daterange"
											      placeholder="请选择项目起止日期">
											    </el-date-picker>
										  	</div>
										</template>
										<div class="clear"></div>
									</li>
									<li class="memberDec">
										<div class="constant">01</div>
										<div class="constant">强化木地板</div>
										<template>
										 	<div class="block fl listDatePicker">
											    <el-date-picker
											      v-model="modelDatePickerText2"
											      type="daterange"
											      placeholder="请选择项目起止日期">
											    </el-date-picker>
										  	</div>
										</template>
										<div class="clear"></div>
									</li>
								</ul>
							</div>
						</div>
						
						<div class="contaminatedList hidden">
							<div class="selectBox">
								<label>起止时间</label>
								<div class="datePickerBox">
									<template>
									 	<div class="block" style="line-height: 27px;">
										    <el-date-picker
										      v-model="startStopDatePickerText1"
										      type="daterange"
										      placeholder="请选择项目起止日期">
										    </el-date-picker>
									  	</div>
									</template>
								</div>
								<div class="clear"></div>
							</div>
							<div class="selectBox">
								<label>室内源作息 (时刻)</label>
								<ul class="timeForm">
									<li class="timeListTitle">
										<div class="name">名称</div>
										<div class="selectTime">时刻选择</div>
										<div class="clear"></div>
									</li>
									<li class="timeListDec">
										<div class="name">类型名01</div>
										<div class="selectTime">
											<div class="wid100">
												<button class="firstTimeBtn timeBtn active">0<img src="../img/timeSelectActive.png"/></button>
												<button class="firstTimeBtn timeBtn">1<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">2<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">3<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">4<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">5<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">6<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">7<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">8<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">9<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">10<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">11<img src="../img/timeSelectActive.png" class="hidden"/></button>
											</div>
											<div class="wid100">
												<button class="secondTimeBtn timeBtn">12<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">13<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">14<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">15<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">16<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">17<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">18<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">19<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">20<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">21<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">22<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">23<img src="../img/timeSelectActive.png" class="hidden"/></button>
											</div>
										</div>
										<div class="clear"></div>
									</li>
									
								</ul>
								<div class="clear"></div>
							</div>
						</div>
						
						<div class="contaminatedList hidden">
							<div class="selectBox">
								<label>起止时间</label>
								<div class="datePickerBox">
									<template>
									 	<div class="block" style="line-height: 27px;">
										    <el-date-picker
										      v-model="startStopDatePickerText2"
										      type="daterange"
										      placeholder="请选择项目起止日期">
										    </el-date-picker>
									  	</div>
									</template>
								</div>
								<div class="clear"></div>
							</div>
							<div class="selectBox">
								<label>室内源作息 (时刻)</label>
								<ul class="timeForm">
									<li class="timeListTitle">
										<div class="name">名称</div>
										<div class="selectTime">时刻选择</div>
										<div class="clear"></div>
									</li>
									<li class="timeListDec">
										<div class="name">类型名01</div>
										<div class="selectTime">
											<div class="wid100">
												<button class="firstTimeBtn timeBtn active">0<img src="../img/timeSelectActive.png"/></button>
												<button class="firstTimeBtn timeBtn">1<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">2<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">3<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">4<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">5<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">6<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">7<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">8<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">9<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">10<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">11<img src="../img/timeSelectActive.png" class="hidden"/></button>
											</div>
											<div class="wid100">
												<button class="secondTimeBtn timeBtn">12<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">13<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">14<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">15<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">16<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">17<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">18<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">19<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">20<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">21<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">22<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">23<img src="../img/timeSelectActive.png" class="hidden"/></button>
											</div>
										</div>
										<div class="clear"></div>
									</li>
									<li class="timeListDec">
										<div class="name">类型名02</div>
										<div class="selectTime">
											<div class="wid100">
												<button class="firstTimeBtn timeBtn active">0<img src="../img/timeSelectActive.png"/></button>
												<button class="firstTimeBtn timeBtn">1<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">2<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">3<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">4<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">5<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">6<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">7<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">8<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">9<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">10<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="firstTimeBtn timeBtn">11<img src="../img/timeSelectActive.png" class="hidden"/></button>
											</div>
											<div class="wid100">
												<button class="secondTimeBtn timeBtn">12<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">13<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">14<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">15<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">16<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">17<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">18<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">19<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">20<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">21<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">22<img src="../img/timeSelectActive.png" class="hidden"/></button>
												<button class="secondTimeBtn timeBtn">23<img src="../img/timeSelectActive.png" class="hidden"/></button>
											</div>
										</div>
										<div class="clear"></div>
									</li>
								</ul>
								<div class="clear"></div>
							</div>
						</div>
						
						<div class="wid100 tac">
							<button class="backUpdate whiteLargerBtn">返回修改</button>		
							<button class="nextBtn greenLargerBtn">下一步</button>						
						</div>
						
					</div>
				</div>
				
			</div>	
		</div>
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content最小高度
			var computedContentMinHeight = $(window).innerHeight() - 60;
			$('.computedContent').css('min-height',computedContentMinHeight + 'px');
			//获取timeSetting最小高度
			var timeSettingMinHeight = computedContentMinHeight - 210;
			$('.timeSetting').css('min-height',timeSettingMinHeight + 'px');
			
			//selectBtn控制
			$('.selectBtns button').click(function(){
				$(this).parent().find('button').removeClass('greenSelectBtn').addClass('whiteSelectBrn');
				$(this).removeClass('whiteSelectBrn').addClass('greenSelectBtn');
			});
			
			//选项菜单控制
			$('.menu').each(function(index){
				$(this).click(function(){
					$('.menu').removeClass('active').addClass('wrongActive').eq(index).removeClass('wrongActive').addClass('active');
					$('.contaminatedList').addClass('hidden').eq(index).removeClass('hidden');
				});
			});
			
			
			//时刻按钮选择控制
			$('.selectTime button').click(function(){
				var self = $(this);
				if(self.hasClass('active')){
					self.removeClass('active').find('img').addClass('hidden');
				}else if(!self.hasClass('active')){
					self.addClass('active').find('img').removeClass('hidden');
				}
			});
		});
		
		new Vue({
			el:'.loginInfo'
		});
		
		var timeSetting = new Vue({
			el:'.timeSetting',
			data:function(){
				return{
					buildingTypes: [{
			          value: '选项1',
			          label: 'A型'
			        }, {
			          value: '选项2',
			          label: 'B型'
			        }, {
			          value: '选项3',
			          label: 'C型'
			        }, {
			          value: '选项4',
			          label: 'D型'
			        }],
			        buildingType:'',
			        radio:'1',
			        renovationDatePickerText:'',
			        acceptanceDatePickerText:'',
			        modelDatePickerText:'',
			        modelDatePickerText1:'',
			        modelDatePickerText2:'',
			        startStopDatePickerText1:'',
			        startStopDatePickerText2:'',
				}
			}
		});
	</script>
</html>
